﻿<div ng-init="init();" class="kmi-layout-content SLI03-content">
    <div class="kmi-header-row">
        <div class="kmi-side-btn left" ng-click="back();">
            <i class="material-icons">&#xE408;</i>
            <div class="kmi-can-click"></div>
        </div>
        <div class="brand-title">
            <div class="custom" ng-if="companyName">
                <div class="title" ng-bind="companyName"></div>
                <img src="" alt="" class="brand">
                <div class="gap"></div>
            </div>
            <div class="digiwin">
                <img src="image/smes_v340/logo_ch.png" alt="">
                <img src="image/smes_v340/logo_en.png" alt="">
            </div>
        </div>
        <div class="header-title" ng-bind="'SLI04.title' | translate"></div>
        <div class="header-logo"></div>
    </div>
    <div class="kmi-layout-main-content">
        <div class="kmi-layout-page list">
            <!-- 筛选条件 -->
            <div class="C00-content" style="display: block;" ng-class="[isClose?'is-close':'', condition_item.data_type]">
                <div class="trigger-btn-fields">
                    <div class="close-btn" ng-click="isClose = !isClose">
                        <i class="material-icons close">indeterminate_check_box</i>
                        <i class="material-icons open">add_box</i>
                        <div class="kmi-can-click"></div>
                    </div>
                </div>
                <div class="kmi-text-fields conditoin-fields">
                    <label class="label" ng-bind="'C00.query_conditon' | translate"></label>
                    <!--条件类别-->
                    <input class="column_name" type="text" ng-model="columnInfo.name" readonly="readonly" ng-click="loadCodeList();" placeholder="{{'C00.field'|translate}}"></input>
                    <div class="tip"><i class="material-icons">&#xE5CF;</i></div>
                    <!--条件类型-->
                    <input class="query_mode" type="text" ng-model="typeInfo.name" ng-if="columnInfo.code != 'tsesl.AndonTime'" readonly="readonly" ng-click="loadTypeList();" placeholder="{{'C00.condition'|translate}}"></input>
                    <div class="tip"><i class="material-icons">&#xE5CF;</i></div>
                    <!--日期區間(Date Start / End)-->
                    <input  type="text" mdl-datepicker="columnInfo.value_s" ng-if="columnInfo.code == 'tsesl.AndonTime'" style="margin-right: 16px;" mdl-date-max="columnInfo.value_s" placeholder="{{'C00.date'|translate}}">
                    <div class="tip" ng-if="columnInfo.code == 'tsesl.AndonTime'" style="right: 10px; color: #000000;" ng-bind="'~'"></div>
                    <input  type="text" mdl-datepicker="columnInfo.value_e" ng-if="columnInfo.code == 'tsesl.AndonTime'" style="margin-left: 8px;" mdl-date-min="columnInfo.value_e" placeholder="{{'C00.date'|translate}}">
                    <!--文字輸入-->
                    <input class="column_value" type="text" ng-model="columnValue" ng-show="columnInfo.code != 'tsesl.AndonTime'" placeholder="{{'C00.value'|translate}}"></input>
                    <!--開窗查詢-->
                    <div class="tip search" ng-if="condition_item.column_query"><i class="material-icons" ng-click="condition_item.column_query(condition_item);">search</i></div>
                    <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--icon_prime"
                        ng-click="addCondition(0);">
                        <img src="image/icons/add.png"></img>
                    </button>
                </div>
                <div class="kmi-text-fields conditoin-fields" ng-if="columnInfo.code == 'tsesl.AndonTime'">
                    <label class="label" ng-bind="'common.report.default_date.title' | translate"></label>
                    <button class="mdl-button mdl-js-button kmi-checkbox" ng-click="changeDate(columnInfo, 3);"
                        style="width:150px;">
                        <img ng-show="columnInfo.date_type!=3" src="image/icons/check0.png"></img>
                        <img ng-show="columnInfo.date_type==3" src="image/icons/check1.png"></img>
                        {{'common.report.default_date.day' | translate}}
                    </button>
                    <button class="mdl-button mdl-js-button kmi-checkbox" ng-click="changeDate(columnInfo, 7);"
                        style="width:150px;">
                        <img ng-show="columnInfo.date_type!=7" src="image/icons/check0.png"></img>
                        <img ng-show="columnInfo.date_type==7" src="image/icons/check1.png"></img>
                        {{'common.report.default_date.week' | translate}}
                    </button>
                    <button class="mdl-button mdl-js-button kmi-checkbox" ng-click="changeDate(columnInfo, 30);"
                        style="width:150px;">
                        <img ng-show="columnInfo.date_type!=30" src="image/icons/check0.png"></img>
                        <img ng-show="columnInfo.date_type==30" src="image/icons/check1.png"></img>
                        {{'common.report.default_date.month' | translate}}
                    </button>
                    <div style="width: 32px;"></div>
                </div>
                <div class="kmi-text-fields" style="height: 40px;align-items: flex-start;">
                    <label class="label" ng-bind="'C00.select_conditon' | translate" style="line-height:34px;"></label>
                    <div class="condition-content perfect-scrollbar" suppress-scroll-x="false">
                        <div class="condition" ng-repeat="condition in conditionList track by $index">
                            <label ng-bind="condition.desc"></label>
                            <button class="mdl-button mdl-button--icon" ng-click="removeCondition($event, $index);"
                                style="z-index:1;">
                                <img src="image/icons/delete.png"></img>
                            </button>
                            <div class="kmi-can-click" ng-click="selectCondition($index, condition);"></div>
                        </div>
                    </div>
                </div>
                <div class="btn-fields">
                    <div class="kmi-button kmi-button-confrim" ng-click="search();" style="width:100px">
                        <label ng-bind="'common.btn.search' | translate"></label>
                        <div class="kmi-can-click"></div>
                    </div>
                    <!-- 20190809 modify by WeiTing for M#60871: 拿掉 ng-disabled，調整成匯出不必先查詢，就能直接按匯出。 -->
                    <div class="kmi-button kmi-button-confrim" style="width:100px">
                        <label ng-bind="'common.btn.export' | translate"></label>
                        <div class="kmi-can-click" ng-click="export();"></div>
                    </div>
                </div>
            </div>
            <!-- Tab按钮 -->
            <div class="switch-content" style="display: flex;background-color: white;">
                <div class="kmi-button switch-button is-selected" ng-click="changeView();" style="width: 120px;"
                    ng-class="{'is-selected':queryMode == 'list'}">
                    <label ng-bind="'SLI04.btn.summary' | translate" class="ng-binding"></label>
                    <div class="kmi-can-click"></div>
                </div>
                <div class="kmi-button switch-button" ng-click="changeView();"
                    ng-class="{'is-selected':queryMode == 'chart'}" style="width: 120px;">
                    <label ng-bind="'SLI04.btn.summary_echart' | translate" class="ng-binding"></label>
                    <div class="kmi-can-click"></div>
                </div>
            </div>
            <!-- 列表 -->
            <div class="kmi-list column-selector" style="height:80%;" ng-show="queryMode == 'list'">
                <div class="kmi-list__header">
                    <div class="kmi-list__column" style="flex:1;text-align:center;" ng-bind="'SLI04.list.column32' | translate"></div>
                    <div class="kmi-list__column" style="flex:1;text-align:center;" ng-bind="'SLI04.list.column33' | translate"></div>
                    <div class="kmi-list__column" style="flex:1;text-align:center;" ng-bind="'SLI04.list.column34' | translate"></div>
                    <div class="kmi-list__column" style="flex:1;text-align:center;" ng-bind="'SLI04.list.column35' | translate"></div>
                </div>
                <div class="kmi-list__row-content">
                    <div class="kmi-list__row" ng-repeat="item in andonDataList track by $index" ng-click="getAndonDetailInfo(item)">
                        <div class="kmi-list__column" style="flex:1;text-align:center;" ng-bind="item.Finisher"></div>
                        <div class="kmi-list__column" style="flex:1;text-align:center;" ng-bind="item.ProcessCount"></div>
                        <div class="kmi-list__column" style="flex:1;text-align:center;" ng-bind="item.ProcessTimeAll"></div>
                        <div class="kmi-list__column" style="flex:1;text-align:center;" ng-bind="item.AverageEvaluate"></div>
                        <div class="kmi-can-click" ng-click="itemCheck($index,item);"></div>
                    </div>
                </div>
            </div>
            <!-- 明细 -->
            <div class="switch-content" style="display: flex;background-color: white;" ng-show="queryMode == 'list'">
                <div class="kmi-button switch-button" style="width: 100px;color: white;;background-color: #1ab7cd;" >
                    <label ng-bind="'SLI03.btn.detail' | translate" class="ng-binding"></label>
                </div>
            </div>
            <!-- 明细列表 -->
            <div class="kmi-list column-selector" style="height:80%; " ng-show="queryMode == 'list'">
                <div class="kmi-list__header">
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column1' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column2' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column3' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;;text-align:center;" ng-bind="'SLI03.list.column6' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;;text-align:center;" ng-bind="'SLI03.list.column7' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column30' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column8' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column9' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column10' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column31' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column11' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column12' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column13' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column14' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column15' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column16' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column17' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column18' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column19' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column20' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column21' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column22' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column23' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column24' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column25' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column26' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column27' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column28' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="'SLI03.list.column29' | translate"></div>
                </div>
                <div class="kmi-list__row-content">
                    <div class="kmi-list__row" ng-repeat="item in andonDetailDataList track by $index">
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.SLightTypeNo"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.SLightTypeName"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.SLightReasonNo"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.REASONNAME"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.EquipmentNo"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.EquipmentName"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.EQUIPMENTTYPE"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.AreaNo"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.BASEAREANO"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.LotNo"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.OPNo"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.MaterialNo"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.Description"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.ResponseLevel"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.Grade"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.AndonTime"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.Andoner"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.ReceiveTime"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.Receiver"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.StartTime"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.Starter"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.FinishTime"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.Finisher"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.ConfromTime"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.Confromer"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.ProcessTime"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.Measure"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.SLightMeasureName"></div>
                        <div class="kmi-list__column" style="flex:0 0 110px;text-align:center;" ng-bind="item.Evaluate"></div>
                        <div class="kmi-can-click" ng-click="itemCheck($index,item);"></div>
                    </div>
                </div>
            </div>
            <!-- 图表 -->
            <div class="kmi-chart" ng-show="queryMode == 'chart'" style="height: 80%;background-color: white;">
                <div class="kmi-chart-content" style="display: flex;">
                    <div id="kmi-chart1" style="width: 50%;height: 100%;"></div>
                    <div id="kmi-chart2" style="width: 50%;height: 100%;"></div>
                </div>
            </div>
        </div>
    </div>
</div>